<template>
  <div class="outmain ba_f">
    <div class>
      <!--      <div class="shuju_title mar_b20">-->
      <!--        <div class="shuju_title_text">-->
      <!--          <span>实时概况</span>-->
      <!--        </div>-->
      <!--      </div>-->
      <!--      <div class="main-icon flex t_l mar_t20">-->
      <!--        <div class="flex-1 t_l pad_20 bortColor">-->
      <!--          <div class="flex-bet flex-y-top">-->
      <!--            <div>-->
      <!--              <p class="title6 fon_14">今日储值金额</p>-->
      <!--              <p class="fon_30 title35 lh16 pad_tb_20">{{jyData.todayMoney || 0}}</p>-->
      <!--              <p class="fon_12 title6 lh25">今日赠送金额：{{jyData.todayGiveMoney || 0}}</p>-->
      <!--            </div>-->
      <!--            <div class="toolTip">-->
      <!--              <el-tooltip effect="dark" placement="top">-->
      <!--                <div slot="content">今日储值金额</div>-->
      <!--                <button type="button"-->
      <!--                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
      <!--                  <span><i class="el-icon-question"></i></span>-->
      <!--                </button>-->
      <!--              </el-tooltip>-->
      <!--            </div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--        <div class="flex-1 t_l pad_20 bortColor">-->
      <!--          <div class="flex-bet flex-y-top">-->
      <!--            <div>-->
      <!--              <p class="title6 fon_14">累计储值金额</p>-->
      <!--              <p class="fon_30 title35 lh16 pad_tb_20">{{jyData.allMoney || 0}}</p>-->
      <!--              <p class="fon_12 title6 lh25">累计赠送金额：{{jyData.allGiveMoney || 0}}</p>-->
      <!--            </div>-->
      <!--            <div class="toolTip">-->
      <!--              <el-tooltip effect="dark" placement="top">-->
      <!--                <div slot="content">累计储值金额</div>-->
      <!--                <button type="button"-->
      <!--                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
      <!--                  <span><i class="el-icon-question"></i></span>-->
      <!--                </button>-->
      <!--              </el-tooltip>-->
      <!--            </div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--        <div class="flex-1 t_l pad_20 bortColor">-->
      <!--          <div class="flex-bet flex-y-top">-->
      <!--            <div>-->
      <!--              <p class="title6 fon_14">累计储值人数</p>-->
      <!--              <p class="fon_30 title35 lh16 pad_tb_20">{{jyData.people || 0}}</p>-->
      <!--              <p class="fon_12 title6 lh25">较前一日：{{jyData.comparePeople || 0}}</p>-->
      <!--            </div>-->
      <!--            <div class="toolTip">-->
      <!--              <el-tooltip effect="dark" placement="top">-->
      <!--                <div slot="content">累计储值人数</div>-->
      <!--                <button type="button"-->
      <!--                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
      <!--                  <span><i class="el-icon-question"></i></span>-->
      <!--                </button>-->
      <!--              </el-tooltip>-->
      <!--            </div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--        <div class="flex-1 t_l pad_20 bortColor">-->
      <!--          <div class="flex-bet flex-y-top">-->
      <!--            <div>-->
      <!--              <p class="title6 fon_14">平台剩余余额</p>-->
      <!--              <p class="fon_30 title35 lh16 pad_tb_20">{{jyData.surplus || 0}}</p>-->
      <!--              <p class="fon_12 title6 lh25">今日消耗余额：{{jyData.consume || 0}}</p>-->
      <!--            </div>-->
      <!--            <div class="toolTip">-->
      <!--              <el-tooltip effect="dark" placement="top">-->
      <!--                <div slot="content">平台剩余余额</div>-->
      <!--                <button type="button"-->
      <!--                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
      <!--                  <span><i class="el-icon-question"></i></span>-->
      <!--                </button>-->
      <!--              </el-tooltip>-->
      <!--            </div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
    </div>
    <div class="shuju_title mar_b20">
      <div class="shuju_title_text">
        <span>积分明细</span>
      </div>
    </div>
    <div class="pad_20 flex-bet">
      <el-form :inline="true" :model="formInline" class="demo-form-inline searchform">
        <el-form-item label="昵称/手机号">
          <el-input v-model="formInline.name" size="medium" placeholder="昵称/手机号" @input="selach"></el-input>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker v-model="formInline.region" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="selach"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="medium" @click="selach">搜索</el-button>
          <!--          <a :href="handelExport()" class="mar_l10"><el-button size="medium">导出</el-button></a>-->
        </el-form-item>
      </el-form>
      <div class="flex"></div>
    </div>
    <el-table :data="list" v-loading="listLoading" :element-loading-text="elementLoadingText" stripe style="width: 100%">
      <el-table-column prop="outTradeNo" label="用户信息">
        <template slot-scope="scope">
          <div class="flex flex-y-top">
            <div class>
              <img class="goodlogo bor_rad50" :src="scope.row.portrait" />
            </div>
            <div class="mar_l10">
              <div class="flex">
                <div class>
                  <div>{{scope.row.userName}}</div>
                  <div>
                    <el-tag size="mini" type="info" class="mar_l5">（ID:{{scope.row.userId}}）</el-tag>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="money" label="积分变化">
        <template slot-scope="scope">
          <div v-show="scope.row.type=='1'" class="color-green">+{{scope.row.integral}}</div>
          <div v-show="scope.row.type=='2'" class="color_rb">-{{scope.row.integral}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="note" label="备注"></el-table-column>
      <!--      <el-table-column-->
      <!--              prop="createdAt"-->
      <!--              label="操作员"-->
      <!--      >-->
      <!--      </el-table-column>-->
      <el-table-column prop="createdAt" label="交易时间"></el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.pagesize" :current-page.sync="page.currentPage" @current-change="handleCurrentChange"></el-pagination>
  </div>
</template>
<script>
import { integralDetailed } from '@/api/statistics';
import { changeDate } from '@/utils/index';
import index from '../../api/index';
export default {
  created() {
    this.fetchData();
    // this.rechargeStatistics()
  },
  data() {
    return {
      jyData: {
        todayMoney: '',
        todayGiveMoney: '',
        allMoney: '',
        allGiveMoney: '',
        people: '',
        comparePeople: '',
        surplus: '',
        consume: ''
      },
      formInline: {
        name: '',
        region: []
      },
      list: [],
      listLoading: false,
      selectRows: '',
      elementLoadingText: '正在加载...',
      page: {
        total: 0,
        size: 10,
        currentPage: 1
      }
    };
  },
  methods: {
    // async rechargeStatistics(){
    //   const {data} = await rechargeStatistics()
    //   this.jyData = data
    // },
    async fetchData() {
      this.listLoading = true;
      if (this.formInline.region && this.formInline.region.length) {
        var startTime = changeDate(this.formInline.region[0]);
        var endTime = changeDate(this.formInline.region[1]);
      }
      let param = {
        page: this.page.currentPage,
        startTime,
        endTime,
        keyword: this.formInline.name
      };
      const { data, count } = await integralDetailed(param);
      this.list = data;
      this.page.total = count;
      this.listLoading = false;
    },
    selach() {
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    }
    // handelExport(){
    //   let startTime = this.formInline.region.length?changeDate(this.formInline.region[0]):''
    //   let endTime = this.formInline.region.length?changeDate(this.formInline.region[1]):''
    //   let backendPath = index.backendPath
    //   return backendPath + "channel/member/get-deposit-order?export=1"+'&page='+this.page.currentPage+'&keyword='+this.formInline.name+'&startTime='+startTime+'&endTime='+endTime
    // },
  }
};
</script>
